<template>
	<section style="margin-top: 50px;">
		<el-row>
			<el-col :span="18" :offset="3">
				<h1 style="text-align: center;">课程简介</h1>
				<div v-html="$store.state.courseInfo.intro" v-if="Type==0">
					
				</div>
			</el-col>
			<el-col :span="20" :offset="2" v-if="Type==1">
				<el-form  label-width="50px">			
					<el-form-item label="修改课程简介" label-width="150px">
				        <div class="edit_container">
				          <quill-editor v-model="$store.state.courseInfo.intro"
				                        ref="myQuillEditor"
				                        class="editer"
				                       >
				          </quill-editor>
				        </div>
					</el-form-item>				
				</el-form>			
			</el-col>
		</el-row >
		<el-row type="flex"  class="row-bg" justify="space-around"  style="margin-top:50px;" v-if="$store.state.courseInfo.type==0">
		  <el-col :span="6" style="text-align: center;"><el-button type="primary" @click="editIntro" style="margin: 0 auto;" v-if="Type==1">保存</el-button></el-col>
		  <el-col :span="6" style="text-align: center;"><el-button type="danger" @click="changeType(1)" v-if="Type==0&&$store.state.role=='teacher'">编辑</el-button></el-col>
		  <el-col :span="6" style="text-align: center;"><el-button type="danger" @click="changeType(0)" v-if="Type==1">取消</el-button></el-col>
		</el-row>		
	</section>
</template>

<script>
	import { courselist,coursedelete,courseadd,courseone,courseedit,bussinesslist,courselistbuil} from '../../api/api';
	import { quillEditor } from 'vue-quill-editor' //调用编辑器

	//import NProgress from 'nprogress'
	export default {
		data() {
			return {
				intro:"",		
				Type:"0",
				ID:this.$route.query.id,
			}
		},
		watch:{
			'isShared':function(){
				if(this.isShared==1){
					this.isSelf='0'
				}else{
					this.isSelf='1'
				}
				this.getList();
			}
		},		
	    components: {
	      quillEditor
	    },    		
		methods: {
			changeType:function(value){
				this.Type=value;
			},
			//页面跳转
		    skip(link,id,type){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        			type:type
		        		}
		        	}
		        )
		    },	
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},			    
			//获取项目列表
			getList: function (type) {
				this.loading = true;
				//NProgress.start();
				if(this.isShared!=2){
					let params={pageNum:this.page,pageSize:this.pageSize,key:this.key,isShared:this.isShared,isSelf:this.isSelf,orderByClause:type};
					courselist(params).then((res) => {
						this.total=res.total;					
						this.Lists = res.list;
						this.loading = false;
						//NProgress.done();
					});					
				}else{
					let params={pageNum:this.page,pageSize:this.pageSize,key:this.key,orderByClause:type};
					courselistbuil(params).then((res) => {
						this.total=res.total;					
						this.Lists = res.list;
						this.loading = false;
						//NProgress.done();
					});						
				}
			},
			handleDel:function (row) {
				this.$confirm('确认删除该记录吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para =row.courseingId;
					
					coursedelete(para).then((res) => {
						if(!res.error){
							this.listLoading = false;
							//NProgress.done();
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getList();							
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消删除'		
					});						
				});
			},
			editIntro:function(){
				this.$confirm('确定修改吗', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					var params=new URLSearchParams();
					params.append('intro',this.intro);
					params.append('courseId',this.ID);
					courseedit(params).then((r) => {
						if(!r.error){
							this.$message({
								message: '修改成功',
								type: 'success'
							});
						this.changeType(0);
						this.getcourseInfo()
						}else{
							this.$message({
								message: '修改失败',
								type: 'error'
							});						
						}
					})	
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消修改'		
					});						
				});				
			
			},		
			getcourseInfo:function(){
				var params=this.$route.query.id;
				var _this=this;
				courseone(params).then((res)=>{			
					_this.$store.state.courseInfo=res;
				})			
			}			
		},	
		mounted() {
			var _this =this;
		}
	};

</script>

<style>
</style>